<script setup lang="ts">
import { reactive, readonly, shallowReactive } from "vue";

interface stuent {
  name: string
  age: number
  sex?: boolean
  list?: {
    name: string
  }
}

let stuenta: stuent = {
  name: "喜羊羊",
  age: 18,
  list: {
    name: "测试"
  }
}

let items = reactive<stuent[]>([])
let itemsCopy = readonly(items)
let itemShallowReactives = shallowReactive<stuent>(stuenta)

const change = () => {
  stuenta.age++
  stuenta.sex = true
  items.push(stuenta)
  // itemsCopy[0].age=100
}
const change1 = () => {
  stuenta.list.name = "我改变了 "
  console.log(stuenta)
}

</script>

<template>
  <h1>认识reactive全家桶, 用来绑定复杂的数据类型对象， 数组</h1>
  <ul>
    <li>reactive</li>
    <li>readonly 只读</li>
    <li>shallowReactive 只处理对象最外层属性的响应式（浅响应式）。</li>
  </ul>

  <h2>reactive</h2>
  <div v-for="item in items">
    {{ item }}
  </div>
  <button @click="change">change</button>
  <h2>readonly 只读</h2>
  readonly

  <h2>shallowReactive 创建一个跟踪自身value变化的ref , 但是不会更新页面</h2>
  <div v-for="item in itemShallowReactives">
    {{ item }}
  </div>
  <button @click="change1">change1</button>

</template>

<style>
</style>
